<template>
  <view class="">
    <view class="hnav">
      <view @click="gocity()">
        <uni-icons color="#97c77c" type="location" size="20"></uni-icons>
        {{ city }}
      </view>
      <view>{{ title }}</view>
      <view></view>
    </view>
    <view class="" style="height: 50px"></view>
  </view>
</template>

<script>
import getcity from "../utils/getcity";
export default {
  name: "heads",
  props: ["title"],
  data() {
    return {
      city: "", //显示城市
    };
  },
  methods: {
    gocity() {
      //到城市页面
      console.log(getcity);
      uni.navigateTo({
        url: "/pages/city/city",
      });
    },
    init() {
      //获取城市名
      getcity().then((res) => {
        console.log(res);
        this.city = res;
      });
    },
  },
  mounted() {
    this.init();
    //选择之后刷新显示城市
    uni.$on("selcity", () => {
      this.init();
    });
  },
};
</script>

<style>
.hnav {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #f7f7fa;
  display: flex;
  border-bottom: 1px solid #afafaf;
  z-index: 1;
}
.hnav > view {
  flex: 1;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hnav > view:nth-child(1) {
  color: #97c77c;
}
</style>